<template>
	<div>
		<van-nav-bar
				title="上传视频"
				left-text="返回"
				left-arrow
				@click-left="onClickLeft"

		/>
		<van-form @submit="add">
			<van-field
					v-model="videoBo.title"
					label="标题"
					placeholder="请输入视频的标题"
					:rules="[{ required: true, message: '请填写标题' }]"
			/>
			<van-field
					readonly
					clickable
					v-model="value"
					:value="value"
					placeholder="请选择视频的类型"
					@click="showPicker = true"
			/>
			<van-popup v-model:show="showPicker" round position="bottom">
				<van-picker
						show-toolbar
						:columns="columns"
						@cancel="showPicker = false"
						@confirm="onConfirm"
				/>
			</van-popup>

			<van-field
					v-model="videoBo.info"
					rows="2"
					autosize
					label="简介"
					type="textarea"
					maxlength="50"
					placeholder="请输入视频的简介"
					show-word-limit
			/>
			<van-field
					v-model="videoBo.oid"
					rows="2"
					disabled="disabled"
					autosize
					label="视频编号"
					type="textarea"
					maxlength="50"
					placeholder=""
					show-word-limit
			/>
			<van-field name="uploader" label="视频">
				<template #input>
					<van-uploader v-model="uploader"
								  accept="video/*" :after-read="upload"/>
				</template>
			</van-field>
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>

	</div>
</template>

<script>
	export default{
		data(){
			return{
				value: '',
				showPicker: false,
				columns: ['搞笑', '美腿丝袜', '脱坑的JAVA', '准备脱坑的JAVA', '其他', ],
				videoBo:{
					uid:'1',
					oid:'',
					type:'',
					info:'',
					title:''
				}

			}
		},methods:{
			onConfirm(value) {
				var that=this;
				if(value=='搞笑'){
					that.videoBo.type=1;
					that.value = that.columns[0];
				}else if(value=='美腿丝袜'){
					that.videoBo.type=2;
					that.value = that.columns[1];
				}else if(value=='脱坑的JAVA'){
					that.videoBo.type=3;
					that.value = that.columns[2];
				}else if(value=='准备脱坑的JAVA'){
					that.videoBo.type=4;
					that.value = that.columns[3];
				}else{
					that.videoBo.type=5;
					that.value = that.columns[4];
				}
				console.log(that.videoBo.type)
				that.showPicker = false;
			},
			onClickLeft() {
				this.$router.push("/MY")
			},
			afterRead(file) {
				// 此时可以自行将文件上传至服务器
				console.log(file);
			},
			add(){
				var that=this;
				this.axios({
					method: 'post',
					url: 'http://localhost:8080/hy/videoController/videoInsert.do',
					data:JSON.stringify(that.videoBo),
					headers: {
						'usertoken':this.$store.state.usertoken,
						'Content-Type':'application/json'
					}
				}).then(function(res){
					console.log(res);
					if(res.data.code==10000){
						that.$toast("新增成功，快去查看吧");
						that.$router.push("/myPage");
					}else{
						that.$toast(res.data.msg);
					}
				})
			},upload(file){
				var that=this;
				let params = new FormData();
				console.log(file);
				params.append('file', file.file)
				let config = {
					headers: {
						'usertoken': this.$store.state.token,
						'Content-Type': 'multipart/form-data'
					},
				}
				this.axios.post('http://localhost:8080/hy/ossController/uploadVideo.do',params,config).
				then(function(res){
					if(res.data.code==10000){
						//上传成功
						console.log(res.data.data)
						that.videoBo.oid=res.data.data

					}else{
						that.$toast(res.data.msg);
					}
				})

			}
		}
	}
</script>

<style>
</style>
